Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(v2): allow adding components to react-live scope #2826

Merged
merged 5 commits into from
Jun 4, 2020
Merged

feat(v2): allow adding components to react-live scope #2826

merged 5 commits into from
Jun 4, 2020

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented May 28, 2020

Motivation

Currently, the react-live scope only exposes the React exports, so we can use React, useState etc, but we can't import any other code easily.

If you build a react component library, and want to allow users to play with the components in a live editor, it's important to have a documented way to provide those components in the react-live scope.

See #2807

Test Plan

Dogfooding by using this feature on the Docusaurus website directly

Notes

Swizzling of the react-live scope object is not an ideal solution, as it's global and needs more work from the user, but I think it's good enough to solve the usecase for now.

When we'll have a way to wrap root component, users could use the MDXProvider to reuse the components of the MDX scope for react-live too, instead of swizzling.

Gatsby has a cool feature that permits to make available in react-live scope anything that is imported in the MDX file. Unfortunately, this feature is not so simple to port to Docusaurus (involves extracting imports in mdx string using a babel plugin, writing them to disk etc... see #2807 (comment))

@slorber slorber requested a review from yangshun as a code owner May 28, 2020 13:14
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label May 28, 2020
@docusaurus-bot
Copy link
Contributor

docusaurus-bot commented May 28, 2020 •
edited
Loading

Deploy preview for docusaurus-2 ready!

Built with commit 43b6a18

https://deploy-preview-2826--docusaurus-2.netlify.app

@slorber slorber mentioned this pull request May 28, 2020
Closed
@slorber slorber changed the title feat(v2): add components to react-live scope (#2807) feat(v2): allow adding components to react-live scope May 28, 2020
@slorber slorber requested a review from lex111 May 28, 2020 13:49
@slorber
Copy link
Collaborator Author

slorber commented May 28, 2020

Direct link to test: https://deploy-preview-2826--docusaurus-2.netlify.app/docs/next/markdown-features#interactive-code-editor

image

@slorber
Copy link
Collaborator Author

slorber commented Jun 3, 2020

Just removed the mdx comps from react-live scope @lex111

lex111
lex111 reviewed Jun 3, 2020
View reviewed changes
packages/docusaurus-theme-live-codeblock/package.json Outdated
@@ -9,6 +9,7 @@
"license": "MIT",
"dependencies": {
"@philpl/buble": "^0.19.7",
"@mdx-js/react": "^1.5.8",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is no longer necessary, can we remove it?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@slorber slorber requested a review from lex111 June 4, 2020 10:09
lex111
lex111 approved these changes Jun 4, 2020
View reviewed changes
Copy link
Contributor

@lex111 lex111 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌

@lex111 lex111 merged commit 953abd8 into facebook:master Jun 4, 2020
@lex111
Copy link
Contributor

lex111 commented Jun 4, 2020

@slorber thanks!

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Jun 17, 2020
@wintercounter
Copy link

wintercounter commented Aug 28, 2020 •
edited
Loading

Is this released already? I'm getting this error:

Component Ui was not imported, exported, or provided by MDXProvider as global scope

ReferenceError: Ui is not defined
(undefined) ReferenceError: Ui is not defined

There is a component defined as <Ui>. Previously I was simply doing Object.assign(React, { ...myProps }) using a custom plugin, but it stopped working with updating to latest. Then I found this PR, it's still not working with it either.

"@docusaurus/core": "^2.0.0-alpha.61",
"@docusaurus/preset-classic": "^2.0.0-alpha.61",
"@docusaurus/theme-live-codeblock": "^2.0.0-alpha.61",

@slorber
Copy link
Collaborator Author

slorber commented Aug 28, 2020

@wintercounter I can't tell anything if you don't show anycode, but did you swizzle @theme/ReactLiveScope as documented?

const ReactLiveScope = {
  React,
  ...React,
};

We spread ...React at initialization time, so when this is done, you might not have assigned your Ui comp to React yet, so it is not in the scope anymore.

I don't think assigning Ui to React is a good idea, you'd rather register the comp explicitly in ReactLiveScope

@wintercounter
Copy link

Turns out my file was cached somewhere and it didn't update, seems like it's working now, however, I still get the message.

> docusaurus build

Creating an optimized production build...

√ Client
  Compiled successfully in 47.77s

√ Server
  Compiled successfully in 36.40s

Component Ui was not imported, exported, or provided by MDXProvider as global scope

Success! Generated static files in build.Use `npm run serve` to test your build locally.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@lex111 lex111 lex111 approved these changes

@yangshun yangshun Awaiting requested review from yangshun

Assignees
No one assigned
Labels
CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@slorber @docusaurus-bot @lex111 @wintercounter @facebook-github-bot